<template>
  <el-dialog
    :title="dialogProps.title"
    :visible.sync="dialogProps.visible"
    width="660px"
    @open="handleDialogOpen()"
  >
    <div slot="title" class="dialog-header">{{ dialogProps.title }}</div>
    <el-form
      :inline="true"
      :model="diaryModel"
      :rules="formRules"
      ref="DiaryForm"
      label-width="80px"
      label-position="right"
      size="small"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="被干预人" prop="diaryPerson">
            <el-input
              :maxlength="50"
              v-model="diaryModel.diaryPerson"
              autofocus
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="档案号" prop="fileNumber">
            <el-input
              :maxlength="50"
              v-model="diaryModel.fileNumber"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="回访日期" prop="dateVisit">
            <el-input
              type="date"
              :maxlength="50"
              v-model="diaryModel.dateVisit"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="具体时间" prop="datetimeVisit">
            <el-input
              type="datetime-local"
              :maxlength="50"
              v-model="diaryModel.datetimeVisit"
            ></el-input>
            <!-- <el-time-picker placeholder="选择时间" v-model="diaryModel.datetimeVisit" style="width: 100%;"></el-time-picker> -->
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="回访方式">
            <el-select v-model="diaryModel.mode" placeholder="请选择">
              <el-option
                v-for="item in modeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="回访内容" prop="contentVisit">
            <el-input
              class="properties-textarea"
              type="textarea"
              :maxlength="50"
              v-model="diaryModel.contentVisit"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="反馈信息" prop="feedbackInfomation">
            <el-input
              class="properties-textarea"
              type="textarea"
              :maxlength="50"
              v-model="diaryModel.feedbackInfomation"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="处理结果" prop="handle">
            <el-input
              class="properties-textarea"
              type="textarea"
              :maxlength="50"
              v-model="diaryModel.handle"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="handleDialogClose()">取 消</el-button>
      <el-button type="primary" size="small" @click="submitForm('DiaryForm')"
        >确 定</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
import { updateDiary, saveDiary } from "@/api/HealthIntervention/followUpDiary";

export default {
  name: "diary-edit",
  data() {
    return {
      diaryModel: {
        diaryId: 0,
        fileNumber: "",
        dateVisit: "",
        datetimeVisit: "",
        diaryPerson: "",
        mode: "",
        contentVisit: "",
        feedbackInfomation: "",
        handle: "",
      },
      //   下拉框
      modeList: [
        { value: "电话", label: "电话" },
        { value: "QQ", label: "QQ" },
        { value: "微信", label: "微信" },
        { value: "短信", label: "短信" },
        { value: "邮件", label: "邮件" },
      ],
      dialogProps: {
        visible: false,
        action: "",
        title: "",
      },
      //输入提示
      formRules: {
        // diaryPerson: [
        //   { required: true, message: "请输入名称", trigger: "blur" },
        //   {
        //     min: 3,
        //     max: 32,
        //     message: "长度在 3 到 32 个字符",
        //     trigger: "blur",
        //   },
        // ],
        // fileNumber: [
        //   { required: true, message: "请输入档案号", trigger: "blur" },
        //   {
        //     min: 6,
        //     max: 32,
        //     message: "长度在 6 到 32 个字符",
        //     trigger: "blur",
        //   },
        // ],
      },
    };
  },
  methods: {
    handleDialogOpen() {
      this.$nextTick(() => {
        this.$refs["DiaryForm"].clearValidate();
      });
    },

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.dialogProps.action === "add") {
            this.doSaveDiary();
          } else {
            this.doUpdateDiary();
          }
        } else {
          return false;
        }
      });
    },
    handleDialogClose() {
      this.dialogProps.visible = false;
    },
    //编辑
    doUpdateDiary() {
      this.loading = true;
      updateDiary(this.diaryModel)
        .then((response) => {
          this.loading = false;
          this.dialogProps.visible = false;
          this.$emit("save-finished");
          this.$message({
            message: "编辑成功",
            type: "success",
          });
        })
        .catch((error) => {
          this.outputError(error);
        });
    },
    //新增
    doSaveDiary() {
      this.loading = true;
      alert(JSON.stringify(this.diaryModel))
      saveDiary(this.diaryModel)
        .then((response) => {
          this.loading = false;
          this.dialogProps.visible = false;
          this.$emit("save-finished");
          this.$message({
            message: "新增成功",
            type: "success",
          });
        })
        .catch((error) => {
          this.outputError(error);
        });
    },
    outputError(error) {
      console.log(error.response ? error.response : error.message);
      this.loading = false;
      this.$message({
        showClose: true,
        message: "出错了，请按F12查看浏览器日志。",
        type: "error",
      });
    },
  },
  mounted: function () {
    this.$nextTick(() => {
      this.$on("openEditDiaryDialog", function (router) {
        this.diaryModel = router;
        this.dialogProps.action = "edit";
        this.dialogProps.title = "编辑";
        this.dialogProps.visible = true;
      });
      this.$on("openAddDiaryDialog", function () {
        this.dialogProps.action = "add";
        this.dialogProps.title = "新增";
        this.diaryModel = {};
        this.dialogProps.visible = true;
      });
    });
  },
};
</script>

<style lang="scss" scoped>
.properties-textarea {
  width: 496px;
}
</style>





